<template>
	<view class="middle-section" @touchstart="onPullDownRefresh">

  <!-- 导航栏容器（包含状态栏占位） -->
	<view class="custom-navbar">
		<!-- 导航栏主体 -->
		<view class="nav-body">
			<!-- 左侧图标 -->
			<view class="nav-icon left" @click="toggleMenu">
			<view class="iconfont icon-focus"></view>
			</view>

			<!-- 中间选项卡 -->
			<view class="tabs">
			<!-- <text class="tab-item active">关注</text> -->
			<text class="tab-item">发现</text>
			</view>

			<!-- 右侧图标 -->
			<view class="nav-icon right">
			<view class="iconfont icon-search"></view>
			</view>
		</view>
	</view>
    
	<!-- 状态栏占位 -->
	<view class="status-bar"></view>

	<!-- 菜单蒙版 -->
	<view class="menu-mask" v-if="showMenu" @click="closeMenu"></view>

	<!-- 左侧菜单 -->
	<view class="side-menu" :class="{active: showMenu}">
		<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuItemClick(item)">
			<view class="iconfont" :class="item.icon"></view>
			<text>{{item.name}}</text>
		</view>
	</view>

    <!-- 瀑布流内容 -->
    <view class="content-grid">
      <!-- 大图内容项 -->
      <!-- <view class="content-item big" @click="goToPage('/pages/post/post-1/post-1')">
        <image class="item-image" src="/static/sample1.jpg">
          <text class="image-tag">先进轨道交通</text>
        </image>
        <text class="item-title">这是一个视频的标题</text>
        <view class="item-info">
          <text class="author">小小四ear</text>
          <text class="hearts">32.2万</text>
        </view>
      </view> -->

      <!-- 常规内容项 -->
      <view class="content-item" v-for="(item, index) in contentItems" :key="index"
      @click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.id)}`)">
        <image class="item-image" 
               :src="item.image" 
               mode="aspectFill" 
               :alt="item.title" >
          <text class="image-tag">{{ item.tag }}</text>
        </image>
        <text class="item-title">{{ item.title }}</text>
        <view class="item-info">
          <text class="author">{{ item.author }}</text>
          <text class="hearts">{{ item.hearts }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { http } from '@/utils/request'
import {onReachBottom} from '@dcloudio/uni-app';

const showMenu = ref(false)
const contentItems = ref([])
const userId = ref()

const fetchRandomPosts = async () => {
	console.log("开始获取首页数据");
  try {
    const res = await http.get('/posts/by/random')
	// console.log(res.data);
    if (res.data && Array.isArray(res.data)) {
      contentItems.value.push(...res.data.map(item => ({
        image: item.image,
        tag: item.tag,
        title: item.title,
        author: item.nickName,
        hearts: item.likeCount.toString(),
		id: item.postId,
      })))
    }
  } catch (error) {
    
    console.error('获取随机帖子失败:', error)
  }
}

const starTag = ref([])
// 初始化加载数据
onMounted(async() => {
  fetchRandomPosts()
  userId.value = uni.getStorageSync('userId')
	// try {
	// 	const res = await http.get('/api/tag/favorite/list')
	// 	console.log(res.data);
	// 	starTag.value.push(res.data.map(item=>{
	// 		return{
	// 			id: item.tagId,
	// 			name: item.content
	// 		}
	// 	}))
	// } catch (e) {
	// 	console.log("获取用户收藏标签失败:",e);
	// }
})

onReachBottom(()=>{
  fetchRandomPosts()
})
const menuItems = [
  // { name: '深色模式', icon: 'icon-moon' },
  { name: '修改个人信息', icon: 'icon-user' },
  { name: '设置', icon: 'icon-setting' },
  { name: '帮助', icon: 'icon-help' }
]

const toggleMenu = () => {
  showMenu.value = !showMenu.value
}

const closeMenu = () => {
  showMenu.value = false
}

const handleMenuItemClick = (item) => {
  closeMenu()
  if (item.name === '修改个人信息') {
    goToPage('/pages/person/edit-profile/edit-profile')
  } else if (item.name === '设置') {
    goToPage('/pages/person/settings/settings')
  } else if (item.name === '帮助') {
    goToPage('/pages/tabbar/help-center/help-center')
  }
}

const goToPage = (url) => {
  if (!url) return
  uni.navigateTo({
    url
  })
}

const handleImageError = (item) => {
  console.error('图片加载失败 - 原始URL:', item.image)
  console.log('尝试加载默认图片...')
  
  // 检查图片URL格式
  if (!item.image.startsWith('http') && !item.image.startsWith('/')) {
    console.warn('图片URL格式不正确:', item.image)
    item.image = '/static/default-image.jpg'
  } else {
    // 如果已经是完整URL但仍加载失败，使用默认图片
    item.image = '/static/default-image.jpg'
  }
  
  // 强制更新视图
  contentItems.value = [...contentItems.value]
}

</script>

<style>

.middle-section {
  flex: 1;
  background-color: #f8f8f8;
}


/* 导航栏容器 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* 导航主体布局 */
.nav-body {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

/* 图标容器通用样式 */
.nav-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 选项卡样式 */
.tabs {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.tab-item {
  font-size: 16px;
  color: #666;
  position: relative;
  transition: color 0.3s;
}

/* 选中状态 */
.tab-item.active {
  color: #007AFF;
  font-weight: 500;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 20px;
  height: 2px;
  background: #007AFF;
  transform: translateX(-50%);
}

/* 模拟图标（实际建议使用字体图标） */
.iconfont {
  font-size: 22px;
}
.icon-focus::before { content: "★"; color: #007AFF; }
.icon-search::before { content: "🔍"; }
.icon-moon::before { content: "🌙"; }
.icon-user::before { content: "👤"; }
.icon-setting::before { content: "⚙️"; }
.icon-help::before { content: "❓"; }

/* 菜单蒙版 */
.menu-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 998;
}

/* 侧边菜单 */
.side-menu {
	position: fixed;
	top: 0;
	left: -250px;
	width: 250px;
	height: 100%;
	background-color: #fff;
	z-index: 999;
	transition: transform 0.3s ease;
}
.side-menu.active {
	transform: translateX(250px);
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #f0f0f0;
}
.menu-item .iconfont {
	margin-right: 10px;
	font-size: 20px;
}

.category-scroll {
  padding: 12px 0;
  white-space: nowrap;
  background-color: #fff;
}

.category-tag {
  display: inline-block;
  padding: 4px 16px;
  margin: 0 6px;
  border-radius: 14px;
  background-color: #f0f0f0;
  color: #666;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
  margin-top: 45px;
}

.content-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.content-item.big {
  grid-column: span 2;
}

.item-image {
  width: 100%;
	position: relative;
}

.image-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.item-title {
  display: block;
  padding: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.item-info {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 8px;
  font-size: 12px;
  color: #666;
}
.hearts:before{
  content: "♥ ";
  color: #FF2442;
}



</style>
